* {
    padding: 0;
    margin: 0;
}
 
body {
    height: 864px;
    // overflow: hidden;
    // background-image: linear-gradient(to right, #1fc8db 51%, #2cb5e8 75%);
    // background-repeat: no-repeat;
    background-image: url(../img/bg.gif);
    h4 {
        font-size: 30px;
        // position: absolute;
        // top: 10px;
        margin: 10px auto 10px;
        text-indent: 9em;
        // position: relative;
        // left: 50%;
        width: 800px;
    }

    #itembox {
        cursor: pointer;
        height: 600px;
        width: 1000px;
        background-color: whitesmoke;
        margin: 0 auto;
        position: relative;
        box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
        #tab {
            position: absolute;
            height: 600px;
            background-color: pink;
            width: 200px;
            // background-color: rgb(49, 46, 46);
            background-color: #252829;
            li {
                list-style: none;
                background-color: rgb(49, 46, 46);
                color: white;
                font: 700 20px "Arile";
                height: 50px;
                line-height: 50px;
                text-indent: 2em;
                border-bottom: 0.1px solid gray;
            }

        }

        section {
            display: none;
            position: absolute;
            height: 600px;
            width: 800px;
            // background-color: pink;
            right: 0;

            // div {
            //     height: 20%;
            //     width: 100%;
            //     // background-color: pink;

            // }

            #usersbox {
                height: 100px;
                width: 100%;
                position: relative;

                button {
                    position: absolute;
                    right: 0;
                    background-color: skyblue;
                    width: 100px;
                    height: 50px;
                    font: 700 14px "a";
                    color: white;
                    // margin-left: 10px;
                    // outline: 2px solid ;
                    border: 0;
                    cursor: pointer;
                }

                button:hover {
                    filter: brightness(0.8);


                }

                table {
                    top: 50px;
                    position: absolute;

                    td {
                        font-weight: 700;
                        padding-bottom: 0;
                    }
                }
            }

            #usersmsg {
                position: relative;
                width: 800px;
                height: 300px;

                li {
                    height: 250px;
                    position: absolute;
                    width: 800px;
                    list-style: none;

                    // background-color: skyblue;
                    td {

                        //    border-bottom: 1px solid black;
                        //    border-right: 1px solid black;
                        button {
                            height: 30px;
                            border: 0;
                            width: 50px;
                            border-radius: 5px;
                            color: white;
                        }

                        .per_change {
                            background-color: green;
                            // font-weight: 700;
                        }

                        .per_can {
                            background-color: red;
                            // font-weight: 700;

                        }

                        button:hover {
                            filter: brightness(0.8);
                        }
                    }

                }
            }
        }

        #exit {
            position: absolute;
            bottom: 30px;
            left: 80px;
        }

        i:hover {
            filter: brightness(0.8);
           
        }
    }
}

#usersec div {
    height: 200px;
    position: relative;

    a {
        position: absolute;
        text-decoration: none;
        height: 40px;
        width: 100px;
        background-color: skyblue;
        color: white;
        font: 700 15px "a";
        text-align: center;
        line-height: 40px;
        top: 40px;
        left: 350px;
        border-radius: 10px;
    }

    a:hover {
        filter: brightness(.8);
    }

}

#usersec table {

    height: 300px;
    width: 600px;
    // background-color: pink;
    margin: 40px auto 0;

    tr {

        // border: 1px solid black;
        td {
            // border: 1px solid black;
            border-bottom: 1px solid #CCCCCC;
            text-indent: 2em;
        }

        td:first-child {
            width: 100px;
            text-align: right;
        }
    }

}

#shadowbox {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #changebox {
        margin: 50px auto;
        border-radius: 20px;
        height: 428px;
        width: 400px;
        z-index: 999;
        background-color: whitesmoke;

        input {
            margin: 12px 48px;
            height: 45px;
            font-size: 20px;
            width: 300px;
        }

        i {
            margin-left: 360px;
        }

        input:focus {
            // border: 0;
            outline: 1px #1a73e8 solid;
        }

        button {
            height: 40px;
            width: 100px;
            margin: 18px 50px;
            border: 0;
            font: 700 14px "ll";
            color: white;
            border-radius: 10px;
        }

        button:hover {
            filter: brightness(.8);
        }
    }
}

#eidshadowbox {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #eidchangebox {
        margin: 50px auto;
        border-radius: 20px;
        height: 428px;
        width: 400px;
        z-index: 999;
        background-color: whitesmoke;

        input {
            margin: 18px 48px;
            height: 45px;
            font-size: 20px;
            width: 300px;
        }

        input:focus {
            // border: 0;
            outline: 1px #1a73e8 solid;
        }

        i {
            margin-left: 360px;
        }

        button {
            height: 40px;
            width: 100px;
            margin: 18px 50px;
            border: 0;
            font: 700 14px "ll";
            color: white;
            border-radius: 10px;
        }

        button:hover {
            filter: brightness(.8);
        }
    }
}

#exp_fram {
    height: 48px;
    width: 698px;
    border: 1px solid skyblue;
    outline: 0;
    font-size: 20px;
    position: absolute;
    text-indent: 2em;
}

button {
    cursor: pointer;
}

#expshadowtrue {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #expt {
        margin: 0px auto;
        border-radius: 20px;
        height: 750px;
        width: 900px;
        z-index: 999;
        background-color: whitesmoke;
        position: relative;
        top: 0%;

        i {
            position: absolute;
            right: 5px;
        }

        h3 {
            position: absolute;
            left: 173px;
            top: 70px;
        }

        #acs {
            left: 124px;
            top: 53px;
        }

        table {
            // background-color: pink;
            margin: 0 auto;
            position: absolute;
            top: 103px;
            left: 13%;

            th {
                background-color: skyblue;
                height: 50px;
            }

            td {
                width: 150px;
                height: 50px;
                text-align: center;
            }

            tr {

                background-color: rgba(196, 184, 184, 0.78);
            }
        }
    }
}

#pack_pag {
    position: relative;
    left: 30%;
    top: 50px;

    #usefront {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #toright {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #toleft {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #uselast {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #pages {
        float: left;
        height: 38px;
        width: 100px;
        border: 1px solid black;
        font-size: 20px;
        text-align: center;
        line-height: 38px;
    }
}

#foodsec {
    #addfood {
        position: absolute;
        left: 740px;
        top: 540px;
    }

    input {
        height: 48px;
        width: 698px;
        border: 1px solid skyblue;
        outline: 0;
        font-size: 20px;
        position: relative;
        text-indent: 2em;
    }

    #exp_food {
        position: absolute;
        right: 0;
        top: 0;
        background-color: skyblue;
        width: 100px;
        height: 50px;
        font: 700 14px "a";
        color: white;
        border: 0;
    }

    #exp_food:hover {
        filter: brightness(0.8);
    }

    tr {

        height: 50px;
        background-color: rgb(56, 135, 168);

        th {

            height: 50px;
        }
    }

    #foodbox {
        height: 300px;
        width: 800px;
        // background-color: pink;
        position: relative;

        li {
            list-style: none;
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;

            tr {
                background-color: whitesmoke;

                td {
                    height: 50px;
                    width: 100px;
                    text-align: center;
                    line-height: 50px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    button {
                        color: white;
                        height: 30px;
                        border: 0;
                        width: 50px;
                        border-radius: 5px;
                        color: white;

                    }

                    button:hover {
                        filter: brightness(.8);
                    }
                }
            }

        }
    }
}

#food_eid_shadow {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #foodchangebox {
        margin: 20px auto;
        border-radius: 20px;
        height: 590px;
        width: 400px;
        z-index: 999;
        background-color: whitesmoke;

        input {
            margin: 18px 48px;
            height: 45px;
            font-size: 20px;
            width: 300px;
        }

        input:focus {
            // border: 0;
            outline: 1px #1a73e8 solid;
        }

        i {
            margin-left: 360px;
        }

        button {
            height: 40px;
            width: 100px;
            margin: 18px 50px;
            border: 0;
            font: 700 14px "ll";
            color: white;
            border-radius: 10px;
        }

        button:hover {
            filter: brightness(.8);
        }
    }
}

#expfoodbox {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #expfood {
        margin: 10px auto;
        // border-radius: 20px;
        height: 700px;
        width: 900px;
        z-index: 999;
        background-color: whitesmoke;
        position: relative;
        top: 0%;
        overflow-y: scroll;

        i {
            position: absolute;
            right: 5px;
        }


        h3 {
            position: absolute;
            left: 173px;
            top: 70px;
        }

        #foodimg {
            left: 124px;
            top: 53px;
        }

        table {
            // background-color: pink;
            margin: 0 auto;
            position: absolute;
            top: 103px;
            left: 13%;

            th {
                background-color: rgb(35, 109, 138);
                height: 50px;
            }

            td {
                width: 150px;
                height: 50px;
                text-align: center;

                white-space: nowrap;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            tr {

                background-color: skyblue;
            }
        }
    }

}

#add_food_shadow {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #add_food {
        margin: 20px auto;
        border-radius: 20px;
        height: 590px;
        width: 400px;
        z-index: 999;
        background-color: whitesmoke;

        input {
            margin: 18px 48px;
            height: 45px;
            font-size: 20px;
            width: 300px;
        }

        input:focus {
            // border: 0;
            outline: 1px #1a73e8 solid;
        }

        i {
            margin-left: 360px;
        }

        button {
            height: 40px;
            width: 100px;
            margin: 18px 50px;
            border: 0;
            font: 700 14px "ll";
            color: white;
            border-radius: 10px;
        }

        button:hover {
            filter: brightness(.8);
        }
    }
}

#pack_foodpag {
    position: absolute;
    bottom: 18%;
    // top: 50%;
    left: 30%;

    #foodfront {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #arw-right {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #arw-left {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #foodlast {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #food {
        float: left;
        height: 38px;
        width: 100px;
        border: 1px solid black;
        font-size: 20px;
        text-align: center;
        line-height: 38px;
    }
}



#userimg {
    position: relative;
    top: 31px;
    left: 348px;
}

#foodsec {
    #addfood {
        left: 740px;
        top: 540px;
    }

    input {
        height: 48px;
        width: 698px;
        border: 1px solid skyblue;
        outline: 0;
        font-size: 20px;
        position: relative;
        text-indent: 2em;
    }

    #exp_food {
        position: absolute;
        right: 0;
        top: 0;
        background-color: skyblue;
        width: 100px;
        height: 50px;
        font: 700 14px "a";
        color: white;
        border: 0;
    }

    #exp_food:hover {
        filter: brightness(0.8);
    }

    tr {

        height: 50px;
        background-color: rgb(56, 135, 168);

        th {

            height: 50px;
        }
    }
}

// 对order部分样式的修改
#ordersec {
    #addorder {
        position: absolute;
        left: 740px;
        top: 540px;
    }

    input {
        height: 48px;
        width: 698px;
        border: 1px solid skyblue;
        outline: 0;
        font-size: 20px;
        position: relative;
        text-indent: 2em;
    }

    #exp_order {
        position: absolute;
        right: 0;
        top: 0;
        background-color: skyblue;
        width: 100px;
        height: 50px;
        font: 700 14px "a";
        color: white;
        border: 0;
    }

    #exp_order:hover {
        filter: brightness(0.8);
    }

    tr {

        height: 50px;
        background-color: rgb(56, 135, 168);

        th {

            height: 50px;
        }
    }

    #orderbox {
        height: 300px;
        width: 800px;
        // background-color: pink;
        position: relative;

        li {
            list-style: none;
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;

            tr {
                background-color: whitesmoke;

                td {
                    height: 50px;
                    width: 100px;
                    text-align: center;
                    line-height: 50px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    button {
                        color: white;
                        height: 30px;
                        border: 0;
                        width: 50px;
                        border-radius: 5px;
                        color: white;

                    }

                    button:hover {
                        filter: brightness(.8);
                    }
                }
            }

        }
    }
}

#pack_orderpag {
    position: absolute;
    bottom: 18%;
    // top: 50%;
    left: 30%;

    #orderfront {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #arw_right {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #arw_left {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #orderlast {
        float: left;
        height: 40px;
        width: 50px;
        font-size: 20px;
    }

    #order {
        float: left;
        height: 38px;
        width: 100px;
        border: 1px solid black;
        font-size: 20px;
        text-align: center;
        line-height: 38px;
    }
}

#order_eid_shadow {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #orderchangebox {
        margin: 50px auto;
        border-radius: 20px;
        height: 400px;
        width: 400px;
        z-index: 999;
        background-color: whitesmoke;

        input {
            margin: 18px 48px;
            height: 45px;
            font-size: 20px;
            width: 300px;
        }

        input:focus {
            // border: 0;
            outline: 1px #1a73e8 solid;
        }

        i {
            margin-left: 360px;
        }

        button {
            height: 40px;
            width: 100px;
            margin: 18px 50px;
            border: 0;
            font: 700 14px "ll";
            color: white;
            border-radius: 10px;
        }

        button:hover {
            filter: brightness(.8);
        }
    }
}

#us {
    height: 30px;
    width: 200px;
    border-bottom: 1px solid gray;
    margin: 0 auto;
    // background-color: pink;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
}

#exporderbox {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #exporder {
        margin: 10px auto;
        // border-radius: 20px;
        height: 700px;
        width: 900px;
        z-index: 999;
        background-color: whitesmoke;
        position: relative;
        top: 0%;
        overflow-y: scroll;
        border-radius: 10px;

        i {
            position: absolute;
            right: 5px;
        }


        h3 {
            position: absolute;
            left: 173px;
            top: 70px;
        }

        #orderimg {
            left: 124px;
            top: 53px;
        }

        table {
            // background-color: pink;
            margin: 0 auto;
            position: absolute;
            top: 103px;
            left: 13%;

            th {
                background-color: rgb(35, 109, 138);
                height: 50px;
            }

            td {
                width: 150px;
                height: 50px;
                text-align: center;

                white-space: nowrap;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            tr {

                background-color: skyblue;
            }
        }
    }
}
#add_order_shadow {
    display: none;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    #add_order {
        margin: 20px auto;
        border-radius: 20px;
        height: 500px;
        width: 400px;
        z-index: 999;
        background-color: whitesmoke;

        input {
            margin: 18px 48px;
            height: 45px;
            font-size: 20px;
            width: 300px;
        }

        input:focus {
            // border: 0;
            outline: 1px #1a73e8 solid;
        }

        i {
            margin-left: 360px;
        }

        button {
            height: 40px;
            width: 100px;
            margin: 18px 50px;
            border: 0;
            font: 700 14px "ll";
            color: white;
            border-radius: 10px;
        }

        button:hover {
            filter: brightness(.8);
        }
    }
}
